<template>
	<div class="ZxyStepParNode">
		<div v-for="(item, index) in StepDataList" :key="index" :style="`width:${100 / StepDataList.length}%;`" class="ZxyStepFor">
			<div class="ZxyStepElement">
				<!-- 步骤圆圈 -->
				<div class="ZxyStep" :style="`border-color:${colorFunc(index)};`" @stepClick="$emit('stepClick', item)">
					<div class="ZxyStepText" :style="` color:${colorFunc(index)};`">
						{{ index + 1 }}
					</div>
				</div>

				<!-- 步骤连线 -->
				<div
					class="ZxyStepLine"
					:style="`background-color:${item[activeProperty] ? '#409EFF' : ''};`"
					v-if="index !== StepDataList.length - 1"
				></div>
			</div>

			<!-- 步骤文字 -->
			<div class="ZxyTitleClass" :style="`color:${colorFunc(index)};`" @stepClick="$emit('stepClick', item)">
				{{ item.title }}
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'IgwStepCom',

	props: {
		StepDataList: {
			// 步骤列表
			type: Array,
			default: Array
		},
		activeProperty: {
			// 走过标识
			type: String,
			default: ''
		},
		stepClick: {
			// 步骤点击事件
			type: Function,
			default: Function
		}
	},

	methods: {
		colorFunc(index) {
			if (index === 0) {
				return this.StepDataList[index][this.activeProperty] ? '#409EFF' : '#c0c4cc'
			} else {
				return this.StepDataList[index - 1][this.activeProperty] ? '#409EFF' : '#c0c4cc'
			}
		}
	}
}
</script>
<style lang='scss' scoped>
.ZxyStepParNode {
	display: flex;
}

.ZxyStepFor {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.ZxyStepElement {
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
}

.ZxyStep {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #c0c4cc;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	z-index: 2;
	background-color: white;
}

.ZxyStepLine {
	background-color: #c0c4cc;
	position: absolute;
	height: 2px;
	top: 45%;
	right: -50%;
	left: 50%;
}

.ZxyStepText {
	color: #c0c4cc;
	font-weight: 600;
}

.ZxyTitleClass {
	color: #c0c4cc;
	height: 38px;
	line-height: 38px;
}
</style>
